<template>
  <div class="table-wrapper w-100">
    <div class="title rounded shadow-harsh pv-10">
      快照管理
      <div class="search">
        <el-button size="mini" type="success" @click="addHandler">新增</el-button>
        <el-input
          style="margin-left: 10px"
          v-model="search"
          size="mini"
          placeholder="输入备注关键字搜索" />
      </div>
    </div>


    <div class="mt-30">
      <el-table
        class="w-100 rounded shadow-harsh p-5"
        :data="tableData.filter(data => !search || data.details.toLowerCase().includes(search.toLowerCase())).slice((currentPage-1)*10,currentPage*10)">
        <el-table-column
          label="制作时间"
          prop="createTime">
        </el-table-column>
        <el-table-column
          label="快照对象"
          prop="tableName">
          <template slot-scope="scope">
            <el-tag
              size="medium"
              :disable-transitions="true">
              {{ decodeTableNameEn(scope.row.tableName) }}
            </el-tag>
          </template>
        </el-table-column>

        <el-table-column
          label="快照文件名称"
          prop="backupFileName">
        </el-table-column>

        <el-table-column
          width="300px"
          label="备注"
          prop="details">
        </el-table-column>

        <el-table-column
          align="right">

          <template slot-scope="scope">
            <el-button
              size="mini"
              type="primary"
              @click="handleRollback(scope.$index, scope.row)">回滚
            </el-button>
            <el-popconfirm
              @confirm="handleDelete(scope.$index, scope.row)"
              title="您确定要删除数据吗?">
              <el-button
                slot="reference"
                size="mini"
                type="danger">删除
              </el-button>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination class="pagination"
                     @current-change="handleCurrentChange"
                     :current-page="currentPage"
                     :page-size="10"
                     :total="tableData.length"
                     layout="total, prev, pager, next, jumper">
      </el-pagination>

    </div>

    <el-dialog :close-on-click-modal="false" title="新增快照" :visible.sync="dialogFormVisible">
<!--      <div class="hint">-->
<!--        hint here-->
<!--      </div>-->
      <el-form :model="form">

        <el-form-item label="备份对象" :label-width="formLabelWidth">
          <el-select class="w-100" v-model="form.tableName" placeholder="请选备份对象">
            <el-option
              v-for="item in tables"
              :key="item.name"
              :label="item.label"
              :value="item.name">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="描述" :label-width="formLabelWidth">
          <el-input v-model="form.details" autocomplete="off"></el-input>
        </el-form-item>



      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button :disabled="!judgeValidity" type="primary" @click="handleSubmitAdd">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
const { tables } = require('../../../common/table')
import { decodeTableName } from "../../../common/table";
export default {
  name: "SnapShot",
  mounted() {
    this.$api.getAllBackup().then(res => {
      this.tableData = res.data['records']
    })
  },
  computed: {
    judgeValidity: function() {
      return this.form.tableName !== 'null' && this.form.details !== null
    }
  },

  data() {
    return {
      search: '',
      currentPage: 1,
      tableData: [],

      dialogFormVisible: false,
      form: {
        tableName: null,
        details: null
      },
      formLabelWidth: "100px",
      tables: tables
    };
  },
  methods: {
    getTableIndexByIndex(index) {
      // 通过表的row index来获取表格数据中的row index 在 list 中使用要 -1
      return index + (this.currentPage - 1) * 10 + 1
    },
    decodeTableNameEn: function(en) {
      return decodeTableName(en)
    },
    handleCurrentChange: function(currentPage) {
      this.currentPage = currentPage;
    },
    addHandler: function() {
      this.form = {
        tableName: null,
          details: null
      }
      this.dialogFormVisible = true
    },
    handleEdit(index, row) {
      console.log(index, row);
    },
    handleSubmitAdd: function() {
      this.$api.backup(this.form.tableName, this.form.details)
      this.$message({
        message: '正在备份',
        type: 'info',
        duration: 2000
      });
      this.tableData.push({
        "createTime": "正在备份",
        "updateTime": "",
        "tableName": this.form.tableName,
        "details": this.form.details,
        "backupFileName": "操作正在执行..."
      })

      this.dialogFormVisible = false
    },
    handleRollback(index, row) {
      this.$api.rollback(row.id).then(res => {
        console.log(res)
        if (res['success']) {
          this.$message({
            message: '回滚成功',
            type: 'success',
            duration: 2000
          });

        }
      })
    },

    handleDelete(index, row) {
      console.log(index, row);
      this.$api.editBackup(row.tableName, 'remove', row.id, row).then(res => {
        console.log(res);
        if (res['success']) {
          let n = this.getTableIndexByIndex(index)
          this.tableData.splice(n-1, 1)

          this.$message({
            message: '删除成功',
            type: 'success',
            duration: 2000
          });
        }
      })
    }
  }
};
</script>

<style scoped>

</style>